<template>
  <div class="avatar">
    <img v-bind:src="head_url" class="avatar_img" alt="avatar">
  </div>
</template>

<script>

export default {
  name: "Avatar",
  data() {
    return {}
  },
  props: {
    head_url: {
      type: String,
      default() {
        return "https://cdn.asueeer.com/images/202111/1916298011_1636549335_81.jpg"
      },
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid grey;
}

.avatar_img {
  width: 100%;
  height: 100%;
  background-size: contain;
  border-radius: 50%;
}
</style>